/*
 * @Descripttion: 基本信息模块
 * @Author: Lizhijie
 * @Date: 2021-05-21 18:05:27
 * @LastEditTime: 2021-06-28 17:26:01
 */

import { Descriptions, Icon, Popover } from 'antd';
import React from 'react';
import styles from './index.less';

export default function MyBasicInfo({ data }) {
  const content = (
    <div className={styles['basic-info-box']}>
      <Descriptions title="基本信息" size="small" column={2}>
        {data?.basicInfo?.map(item => (
          <Descriptions.Item label={item?.label} key={item?.label} span={item?.span || 1}>
            {item?.value}
          </Descriptions.Item>
        ))}
      </Descriptions>
      <br />
      <Descriptions title="取数信息" size="small" column={2}>
        {data?.accessInfo?.map(item => (
          <Descriptions.Item label={item?.label} key={item?.label}>
            {item?.value}
          </Descriptions.Item>
        ))}
      </Descriptions>
    </div>
  );

  return (
    <Popover content={content} title="版本信息" trigger="hover" placement="bottomLeft">
      <span style={{ textAlign: 'center', width: '42px', display: 'inline-block' }}>
        <Icon type="container" className="basic-info" />
      </span>
    </Popover>
  );
}
